<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: dark)"><meta name="generator" content="Hexo 5.2.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha256-xejo6yLi6vGtAjcMIsY8BHdKsLg7QynVlFMzdQgUuy8=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" integrity="sha256-Vzbj7sDDS/woiFS3uNKo8eIuni59rjyNGtXfstRzStA=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"gz1234.gitee.io","root":"/","images":"/images","scheme":"Gemini","darkmode":true,"version":"8.12.3","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":{"enable":true,"style":"flat"},"bookmark":{"enable":true,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/js/config.js"></script>

    <meta name="description" content="JavaScript 编码规范 - ESNext 补充篇（草案）2 代码风格2.1 文件[建议] ESNext 语法的 JavaScript 文件使用 .js 扩展名。[强制] 当文件无法使用 .js 扩展名时，使用 .es 扩展名。解释： 某些应用开发时，可能同时包含 ES 5和 ESNext 文件，运行环境仅支持 ES5，ESNext 文件需要经过预编译。部分场景下，编译工具的选择可能需要通过">
<meta property="og:type" content="website">
<meta property="og:title" content="郭泽">
<meta property="og:url" content="https://gz1234.gitee.io/spec-master/es-next-style-guide.html">
<meta property="og:site_name" content="郭泽">
<meta property="og:description" content="JavaScript 编码规范 - ESNext 补充篇（草案）2 代码风格2.1 文件[建议] ESNext 语法的 JavaScript 文件使用 .js 扩展名。[强制] 当文件无法使用 .js 扩展名时，使用 .es 扩展名。解释： 某些应用开发时，可能同时包含 ES 5和 ESNext 文件，运行环境仅支持 ES5，ESNext 文件需要经过预编译。部分场景下，编译工具的选择可能需要通过">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2023-05-31T00:57:28.723Z">
<meta property="article:modified_time" content="2023-05-31T00:57:28.723Z">
<meta property="article:author" content="郭泽">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="https://gz1234.gitee.io/spec-master/es-next-style-guide">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":false,"lang":"zh-CN","comments":true,"permalink":"https://gz1234.gitee.io/spec-master/es-next-style-guide.html","path":"spec-master/es-next-style-guide.html","title":""}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title> | 郭泽
</title>
  





  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">郭泽</p>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#JavaScript-%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83-ESNext-%E8%A1%A5%E5%85%85%E7%AF%87%EF%BC%88%E8%8D%89%E6%A1%88%EF%BC%89"><span class="nav-number">1.</span> <span class="nav-text">JavaScript 编码规范 - ESNext 补充篇（草案）</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E4%BB%A3%E7%A0%81%E9%A3%8E%E6%A0%BC"><span class="nav-number">1.1.</span> <span class="nav-text">2 代码风格</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#2-1-%E6%96%87%E4%BB%B6"><span class="nav-number">1.1.1.</span> <span class="nav-text">2.1 文件</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-ESNext-%E8%AF%AD%E6%B3%95%E7%9A%84-JavaScript-%E6%96%87%E4%BB%B6%E4%BD%BF%E7%94%A8-js-%E6%89%A9%E5%B1%95%E5%90%8D%E3%80%82"><span class="nav-number">1.1.1.0.1.</span> <span class="nav-text">[建议] ESNext 语法的 JavaScript 文件使用 .js 扩展名。</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%BD%93%E6%96%87%E4%BB%B6%E6%97%A0%E6%B3%95%E4%BD%BF%E7%94%A8-js-%E6%89%A9%E5%B1%95%E5%90%8D%E6%97%B6%EF%BC%8C%E4%BD%BF%E7%94%A8-es-%E6%89%A9%E5%B1%95%E5%90%8D%E3%80%82"><span class="nav-number">1.1.1.0.2.</span> <span class="nav-text">[强制] 当文件无法使用 .js 扩展名时，使用 .es 扩展名。</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-2-%E7%BB%93%E6%9E%84"><span class="nav-number">1.1.2.</span> <span class="nav-text">2.2 结构</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#2-2-1-%E7%BC%A9%E8%BF%9B"><span class="nav-number">1.1.2.1.</span> <span class="nav-text">2.2.1 缩进</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E4%BD%BF%E7%94%A8%E5%A4%9A%E8%A1%8C%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%97%B6%E9%81%B5%E5%BE%AA%E7%BC%A9%E8%BF%9B%E5%8E%9F%E5%88%99%E3%80%82%E5%BD%93%E7%A9%BA%E8%A1%8C%E4%B8%8E%E7%A9%BA%E7%99%BD%E5%AD%97%E7%AC%A6%E6%95%8F%E6%84%9F%E6%97%B6%EF%BC%8C%E4%B8%8D%E4%BD%BF%E7%94%A8%E5%A4%9A%E8%A1%8C%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2%E3%80%82"><span class="nav-number">1.1.2.1.1.</span> <span class="nav-text">[建议] 使用多行模板字符串时遵循缩进原则。当空行与空白字符敏感时，不使用多行模板字符串。</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-2-2-%E7%A9%BA%E6%A0%BC"><span class="nav-number">1.1.2.2.</span> <span class="nav-text">2.2.2 空格</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%BD%BF%E7%94%A8-generator-%E6%97%B6%EF%BC%8C-%E5%89%8D%E9%9D%A2%E4%B8%8D%E5%85%81%E8%AE%B8%E6%9C%89%E7%A9%BA%E6%A0%BC%EF%BC%8C-%E5%90%8E%E9%9D%A2%E5%BF%85%E9%A1%BB%E6%9C%89%E4%B8%80%E4%B8%AA%E7%A9%BA%E6%A0%BC%E3%80%82"><span class="nav-number">1.1.2.2.1.</span> <span class="nav-text">[强制] 使用 generator 时，* 前面不允许有空格，* 后面必须有一个空格。</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-2-3-%E8%AF%AD%E5%8F%A5"><span class="nav-number">1.1.2.3.</span> <span class="nav-text">2.2.3 语句</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E7%B1%BB%E5%A3%B0%E6%98%8E%E7%BB%93%E6%9D%9F%E4%B8%8D%E5%85%81%E8%AE%B8%E6%B7%BB%E5%8A%A0%E5%88%86%E5%8F%B7%E3%80%82"><span class="nav-number">1.1.2.3.1.</span> <span class="nav-text">[强制] 类声明结束不允许添加分号。</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E7%B1%BB%E6%88%90%E5%91%98%E5%AE%9A%E4%B9%89%E4%B8%AD%EF%BC%8C%E6%96%B9%E6%B3%95%E5%AE%9A%E4%B9%89%E5%90%8E%E4%B8%8D%E5%85%81%E8%AE%B8%E6%B7%BB%E5%8A%A0%E5%88%86%E5%8F%B7%EF%BC%8C%E6%88%90%E5%91%98%E5%B1%9E%E6%80%A7%E5%AE%9A%E4%B9%89%E5%90%8E%E5%BF%85%E9%A1%BB%E6%B7%BB%E5%8A%A0%E5%88%86%E5%8F%B7%E3%80%82"><span class="nav-number">1.1.2.3.2.</span> <span class="nav-text">[强制] 类成员定义中，方法定义后不允许添加分号，成员属性定义后必须添加分号。</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-export-%E8%AF%AD%E5%8F%A5%E5%90%8E%EF%BC%8C%E4%B8%8D%E5%85%81%E8%AE%B8%E5%87%BA%E7%8E%B0%E8%A1%A8%E7%A4%BA%E7%A9%BA%E8%AF%AD%E5%8F%A5%E7%9A%84%E5%88%86%E5%8F%B7%E3%80%82"><span class="nav-number">1.1.2.3.3.</span> <span class="nav-text">[强制] export 语句后，不允许出现表示空语句的分号。</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%B1%9E%E6%80%A7%E8%A3%85%E9%A5%B0%E5%99%A8%E5%90%8E%EF%BC%8C%E5%8F%AF%E4%BB%A5%E4%B8%8D%E5%8A%A0%E5%88%86%E5%8F%B7%E7%9A%84%E5%9C%BA%E6%99%AF%EF%BC%8C%E4%B8%8D%E5%85%81%E8%AE%B8%E5%8A%A0%E5%88%86%E5%8F%B7%E3%80%82"><span class="nav-number">1.1.2.3.4.</span> <span class="nav-text">[强制] 属性装饰器后，可以不加分号的场景，不允许加分号。</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%E7%9A%84%E5%8F%82%E6%95%B0%E5%8F%AA%E6%9C%89%E4%B8%80%E4%B8%AA%EF%BC%8C%E5%B9%B6%E4%B8%94%E4%B8%8D%E5%8C%85%E5%90%AB%E8%A7%A3%E6%9E%84%E6%97%B6%EF%BC%8C%E5%8F%82%E6%95%B0%E9%83%A8%E5%88%86%E7%9A%84%E6%8B%AC%E5%8F%B7%E5%BF%85%E9%A1%BB%E7%9C%81%E7%95%A5%E3%80%82"><span class="nav-number">1.1.2.3.5.</span> <span class="nav-text">[强制] 箭头函数的参数只有一个，并且不包含解构时，参数部分的括号必须省略。</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%E7%9A%84%E5%87%BD%E6%95%B0%E4%BD%93%E5%8F%AA%E6%9C%89%E4%B8%80%E4%B8%AA%E5%8D%95%E8%A1%8C%E8%A1%A8%E8%BE%BE%E5%BC%8F%E8%AF%AD%E5%8F%A5%EF%BC%8C%E4%B8%94%E4%BD%9C%E4%B8%BA%E8%BF%94%E5%9B%9E%E5%80%BC%E6%97%B6%EF%BC%8C%E7%9C%81%E7%95%A5-%E5%92%8C-return%E3%80%82"><span class="nav-number">1.1.2.3.6.</span> <span class="nav-text">[建议] 箭头函数的函数体只有一个单行表达式语句，且作为返回值时，省略 &amp;#123;&amp;#125; 和 return。</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%E7%9A%84%E5%87%BD%E6%95%B0%E4%BD%93%E5%8F%AA%E6%9C%89%E4%B8%80%E4%B8%AA-Object-Literal%EF%BC%8C%E4%B8%94%E4%BD%9C%E4%B8%BA%E8%BF%94%E5%9B%9E%E5%80%BC%E6%97%B6%EF%BC%8C%E4%BD%BF%E7%94%A8-%E5%8C%85%E8%A3%B9%E3%80%82"><span class="nav-number">1.1.2.3.7.</span> <span class="nav-text">[建议] 箭头函数的函数体只有一个 Object Literal，且作为返回值时，使用 () 包裹。</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E8%A7%A3%E6%9E%84%E5%A4%9A%E4%B8%AA%E5%8F%98%E9%87%8F%E6%97%B6%EF%BC%8C%E5%A6%82%E6%9E%9C%E8%B6%85%E8%BF%87%E8%A1%8C%E9%95%BF%E5%BA%A6%E9%99%90%E5%88%B6%EF%BC%8C%E6%AF%8F%E4%B8%AA%E8%A7%A3%E6%9E%84%E7%9A%84%E5%8F%98%E9%87%8F%E5%BF%85%E9%A1%BB%E5%8D%95%E7%8B%AC%E4%B8%80%E8%A1%8C%E3%80%82"><span class="nav-number">1.1.2.3.8.</span> <span class="nav-text">[强制] 解构多个变量时，如果超过行长度限制，每个解构的变量必须单独一行。</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-%E8%AF%AD%E8%A8%80%E7%89%B9%E6%80%A7"><span class="nav-number">1.2.</span> <span class="nav-text">3 语言特性</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#3-1-%E5%8F%98%E9%87%8F"><span class="nav-number">1.2.1.</span> <span class="nav-text">3.1 变量</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%BD%BF%E7%94%A8-let-%E5%92%8C-const-%E5%AE%9A%E4%B9%89%E5%8F%98%E9%87%8F%EF%BC%8C%E4%B8%8D%E4%BD%BF%E7%94%A8-var%E3%80%82"><span class="nav-number">1.2.1.1.</span> <span class="nav-text">[强制] 使用 let 和 const 定义变量，不使用 var。</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-2-%E8%A7%A3%E6%9E%84"><span class="nav-number">1.2.2.</span> <span class="nav-text">3.2 解构</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%B8%8D%E8%A6%81%E4%BD%BF%E7%94%A83%E5%B1%82%E5%8F%8A%E4%BB%A5%E4%B8%8A%E7%9A%84%E8%A7%A3%E6%9E%84%E3%80%82"><span class="nav-number">1.2.2.1.</span> <span class="nav-text">[强制] 不要使用3层及以上的解构。</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E4%BD%BF%E7%94%A8%E8%A7%A3%E6%9E%84%E5%87%8F%E5%B0%91%E4%B8%AD%E9%97%B4%E5%8F%98%E9%87%8F%E3%80%82"><span class="nav-number">1.2.2.2.</span> <span class="nav-text">[建议] 使用解构减少中间变量。</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%BB%85%E5%AE%9A%E4%B9%89%E4%B8%80%E4%B8%AA%E5%8F%98%E9%87%8F%E6%97%B6%E4%B8%8D%E5%85%81%E8%AE%B8%E4%BD%BF%E7%94%A8%E8%A7%A3%E6%9E%84%E3%80%82"><span class="nav-number">1.2.2.3.</span> <span class="nav-text">[强制] 仅定义一个变量时不允许使用解构。</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%A6%82%E6%9E%9C%E4%B8%8D%E8%8A%82%E7%9C%81%E7%BC%96%E5%86%99%E6%97%B6%E4%BA%A7%E7%94%9F%E7%9A%84%E4%B8%AD%E9%97%B4%E5%8F%98%E9%87%8F%EF%BC%8C%E8%A7%A3%E6%9E%84%E8%A1%A8%E8%BE%BE%E5%BC%8F-%E5%8F%B7%E5%8F%B3%E8%BE%B9%E4%B8%8D%E5%85%81%E8%AE%B8%E6%98%AF-ObjectLiteral-%E5%92%8C-ArrayLiteral%E3%80%82"><span class="nav-number">1.2.2.4.</span> <span class="nav-text">[强制] 如果不节省编写时产生的中间变量，解构表达式 &#x3D; 号右边不允许是 ObjectLiteral 和 ArrayLiteral。</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%BD%BF%E7%94%A8%E5%89%A9%E4%BD%99%E8%BF%90%E7%AE%97%E7%AC%A6%E6%97%B6%EF%BC%8C%E5%89%A9%E4%BD%99%E8%BF%90%E7%AE%97%E7%AC%A6%E4%B9%8B%E5%89%8D%E7%9A%84%E6%89%80%E6%9C%89%E5%85%83%E7%B4%A0%E5%BF%85%E9%9C%80%E5%85%B7%E5%90%8D%E3%80%82"><span class="nav-number">1.2.2.5.</span> <span class="nav-text">[强制] 使用剩余运算符时，剩余运算符之前的所有元素必需具名。</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-3-%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="nav-number">1.2.3.</span> <span class="nav-text">3.3 模板字符串</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%86%85%E5%8F%98%E9%87%8F%E6%9B%BF%E6%8D%A2%E6%97%B6%EF%BC%8C%E4%B8%8D%E8%A6%81%E4%BD%BF%E7%94%A8-2-%E6%AC%A1%E5%8F%8A%E4%BB%A5%E4%B8%8A%E7%9A%84%E5%87%BD%E6%95%B0%E8%B0%83%E7%94%A8%E3%80%82"><span class="nav-number">1.2.3.1.</span> <span class="nav-text">[强制] 字符串内变量替换时，不要使用 2 次及以上的函数调用。</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-4-%E5%87%BD%E6%95%B0"><span class="nav-number">1.2.4.</span> <span class="nav-text">3.4 函数</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E4%BD%BF%E7%94%A8%E5%8F%98%E9%87%8F%E9%BB%98%E8%AE%A4%E8%AF%AD%E6%B3%95%E4%BB%A3%E6%9B%BF%E5%9F%BA%E4%BA%8E%E6%9D%A1%E4%BB%B6%E5%88%A4%E6%96%AD%E7%9A%84%E9%BB%98%E8%AE%A4%E5%80%BC%E5%A3%B0%E6%98%8E%E3%80%82"><span class="nav-number">1.2.4.1.</span> <span class="nav-text">[建议] 使用变量默认语法代替基于条件判断的默认值声明。</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%B8%8D%E8%A6%81%E4%BD%BF%E7%94%A8-arguments-%E5%AF%B9%E8%B1%A1%EF%BC%8C%E5%BA%94%E4%BD%BF%E7%94%A8-args-%E4%BB%A3%E6%9B%BF%E3%80%82"><span class="nav-number">1.2.4.2.</span> <span class="nav-text">[强制] 不要使用 arguments 对象，应使用 ...args 代替。</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-5-%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0"><span class="nav-number">1.2.5.</span> <span class="nav-text">3.5 箭头函数</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0%E8%A2%AB%E8%AE%BE%E8%AE%A1%E4%B8%BA%E9%9C%80%E8%A6%81-call-%E5%92%8C-apply-%E7%9A%84%E6%97%B6%E5%80%99%EF%BC%8C%E4%B8%8D%E8%83%BD%E6%98%AF%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%E3%80%82"><span class="nav-number">1.2.5.1.</span> <span class="nav-text">[强制] 一个函数被设计为需要 call 和 apply 的时候，不能是箭头函数。</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-6-%E5%AF%B9%E8%B1%A1"><span class="nav-number">1.2.6.</span> <span class="nav-text">3.6 对象</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%AE%9A%E4%B9%89%E5%AF%B9%E8%B1%A1%E6%97%B6%EF%BC%8C%E5%A6%82%E6%9E%9C%E6%89%80%E6%9C%89%E9%94%AE%E5%9D%87%E6%8C%87%E5%90%91%E5%90%8C%E5%90%8D%E5%8F%98%E9%87%8F%EF%BC%8C%E5%88%99%E6%89%80%E6%9C%89%E9%94%AE%E9%83%BD%E4%BD%BF%E7%94%A8%E7%BC%A9%E5%86%99%EF%BC%9B%E5%A6%82%E6%9E%9C%E6%9C%89%E4%B8%80%E4%B8%AA%E9%94%AE%E6%97%A0%E6%B3%95%E6%8C%87%E5%90%91%E5%90%8C%E5%90%8D%E5%8F%98%E9%87%8F%EF%BC%8C%E5%88%99%E6%89%80%E6%9C%89%E9%94%AE%E9%83%BD%E4%B8%8D%E4%BD%BF%E7%94%A8%E7%BC%A9%E5%86%99%E3%80%82"><span class="nav-number">1.2.6.1.</span> <span class="nav-text">[建议] 定义对象时，如果所有键均指向同名变量，则所有键都使用缩写；如果有一个键无法指向同名变量，则所有键都不使用缩写。</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%AE%9A%E4%B9%89%E6%96%B9%E6%B3%95%E6%97%B6%E4%BD%BF%E7%94%A8-MethodDefinition-%E8%AF%AD%E6%B3%95%EF%BC%8C%E4%B8%8D%E4%BD%BF%E7%94%A8-PropertyName-FunctionExpression-%E8%AF%AD%E6%B3%95%E3%80%82"><span class="nav-number">1.2.6.2.</span> <span class="nav-text">[强制] 定义方法时使用 MethodDefinition 语法，不使用 PropertyName: FunctionExpression 语法。</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E4%BD%BF%E7%94%A8-Object-keys-%E6%88%96-Object-entries-%E8%BF%9B%E8%A1%8C%E5%AF%B9%E8%B1%A1%E9%81%8D%E5%8E%86%E3%80%82"><span class="nav-number">1.2.6.3.</span> <span class="nav-text">[建议] 使用 Object.keys 或 Object.entries 进行对象遍历。</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%AE%9A%E4%B9%89%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%96%B9%E6%B3%95%E4%B8%8D%E5%BA%94%E4%BD%BF%E7%94%A8%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%E3%80%82"><span class="nav-number">1.2.6.4.</span> <span class="nav-text">[建议] 定义对象的方法不应使用箭头函数。</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%B0%BD%E9%87%8F%E4%BD%BF%E7%94%A8%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E9%94%AE%E5%9C%A8%E4%B8%80%E4%B8%AA%E5%AE%8C%E6%95%B4%E7%9A%84%E5%AD%97%E9%9D%A2%E9%87%8F%E4%B8%AD%E5%AE%8C%E6%95%B4%E5%9C%B0%E5%AE%9A%E4%B9%89%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%EF%BC%8C%E9%81%BF%E5%85%8D%E5%AF%B9%E8%B1%A1%E5%AE%9A%E4%B9%89%E5%90%8E%E7%9B%B4%E6%8E%A5%E5%A2%9E%E5%8A%A0%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7%E3%80%82"><span class="nav-number">1.2.6.5.</span> <span class="nav-text">[建议] 尽量使用计算属性键在一个完整的字面量中完整地定义一个对象，避免对象定义后直接增加对象属性。</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-7-%E7%B1%BB"><span class="nav-number">1.2.7.</span> <span class="nav-text">3.7 类</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%BD%BF%E7%94%A8-class-%E5%85%B3%E9%94%AE%E5%AD%97%E5%AE%9A%E4%B9%89%E4%B8%80%E4%B8%AA%E7%B1%BB%E3%80%82"><span class="nav-number">1.2.7.1.</span> <span class="nav-text">[强制] 使用 class 关键字定义一个类。</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%BD%BF%E7%94%A8-super-%E8%AE%BF%E9%97%AE%E7%88%B6%E7%B1%BB%E6%88%90%E5%91%98%EF%BC%8C%E8%80%8C%E9%9D%9E%E7%88%B6%E7%B1%BB%E7%9A%84-prototype%E3%80%82"><span class="nav-number">1.2.7.2.</span> <span class="nav-text">[强制] 使用 super 访问父类成员，而非父类的 prototype。</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-8-%E6%A8%A1%E5%9D%97"><span class="nav-number">1.2.8.</span> <span class="nav-text">3.8 模块</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-export-%E4%B8%8E%E5%86%85%E5%AE%B9%E5%AE%9A%E4%B9%89%E6%94%BE%E5%9C%A8%E4%B8%80%E8%B5%B7%E3%80%82"><span class="nav-number">1.2.8.1.</span> <span class="nav-text">[强制] export 与内容定义放在一起。</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E7%9B%B8%E4%BA%92%E4%B9%8B%E9%97%B4%E6%97%A0%E5%85%B3%E8%81%94%E7%9A%84%E5%86%85%E5%AE%B9%E4%BD%BF%E7%94%A8%E5%91%BD%E5%90%8D%E5%AF%BC%E5%87%BA%E3%80%82"><span class="nav-number">1.2.8.2.</span> <span class="nav-text">[建议] 相互之间无关联的内容使用命名导出。</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E6%89%80%E6%9C%89-import-%E8%AF%AD%E5%8F%A5%E5%86%99%E5%9C%A8%E6%A8%A1%E5%9D%97%E5%BC%80%E5%A7%8B%E5%A4%84%E3%80%82"><span class="nav-number">1.2.8.3.</span> <span class="nav-text">[强制] 所有 import 语句写在模块开始处。</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-9-%E9%9B%86%E5%90%88"><span class="nav-number">1.2.9.</span> <span class="nav-text">3.9 集合</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%AF%B9%E6%95%B0%E7%BB%84%E8%BF%9B%E8%A1%8C%E8%BF%9E%E6%8E%A5%E6%93%8D%E4%BD%9C%E6%97%B6%EF%BC%8C%E4%BD%BF%E7%94%A8%E6%95%B0%E7%BB%84%E5%B1%95%E5%BC%80%E8%AF%AD%E6%B3%95%E3%80%82"><span class="nav-number">1.2.9.1.</span> <span class="nav-text">[建议] 对数组进行连接操作时，使用数组展开语法。</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E4%B8%8D%E8%A6%81%E4%BD%BF%E7%94%A8%E6%95%B0%E7%BB%84%E5%B1%95%E5%BC%80%E8%BF%9B%E8%A1%8C%E6%95%B0%E7%BB%84%E7%9A%84%E5%A4%8D%E5%88%B6%E6%93%8D%E4%BD%9C%E3%80%82"><span class="nav-number">1.2.9.2.</span> <span class="nav-text">[建议] 不要使用数组展开进行数组的复制操作。</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%B0%BD%E5%8F%AF%E8%83%BD%E4%BD%BF%E7%94%A8-for-of-%E8%BF%9B%E8%A1%8C%E9%81%8D%E5%8E%86%E3%80%82"><span class="nav-number">1.2.9.3.</span> <span class="nav-text">[建议] 尽可能使用 for .. of 进行遍历。</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%BD%93%E9%94%AE%E5%80%BC%E6%9C%89%E5%8F%AF%E8%83%BD%E4%B8%8D%E6%98%AF%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%97%B6%EF%BC%8C%E5%BF%85%E9%A1%BB%E4%BD%BF%E7%94%A8-Map%EF%BC%9B%E5%BD%93%E5%85%83%E7%B4%A0%E6%9C%89%E5%8F%AF%E8%83%BD%E4%B8%8D%E6%98%AF%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%97%B6%EF%BC%8C%E5%BF%85%E9%A1%BB%E4%BD%BF%E7%94%A8-Set%E3%80%82"><span class="nav-number">1.2.9.4.</span> <span class="nav-text">[强制] 当键值有可能不是字符串时，必须使用 Map；当元素有可能不是字符串时，必须使用 Set。</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E9%9C%80%E8%A6%81%E4%B8%80%E4%B8%AA%E4%B8%8D%E5%8F%AF%E9%87%8D%E5%A4%8D%E7%9A%84%E9%9B%86%E5%90%88%E6%97%B6%EF%BC%8C%E5%BA%94%E4%BD%BF%E7%94%A8-Set%E3%80%82"><span class="nav-number">1.2.9.5.</span> <span class="nav-text">[建议] 需要一个不可重复的集合时，应使用 Set。</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E5%BD%93%E9%9C%80%E8%A6%81%E9%81%8D%E5%8E%86%E5%8A%9F%E8%83%BD%E6%97%B6%EF%BC%8C%E4%BD%BF%E7%94%A8-Map-%E5%92%8C-Set%E3%80%82"><span class="nav-number">1.2.9.6.</span> <span class="nav-text">[建议] 当需要遍历功能时，使用 Map 和 Set。</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E7%A8%8B%E5%BA%8F%E8%BF%90%E8%A1%8C%E8%BF%87%E7%A8%8B%E4%B8%AD%E6%9C%89%E6%B7%BB%E5%8A%A0%E6%88%96%E7%A7%BB%E9%99%A4%E5%85%83%E7%B4%A0%E7%9A%84%E6%93%8D%E4%BD%9C%E6%97%B6%EF%BC%8C%E4%BD%BF%E7%94%A8-Map-%E5%92%8C-Set%E3%80%82"><span class="nav-number">1.2.9.7.</span> <span class="nav-text">[建议] 程序运行过程中有添加或移除元素的操作时，使用 Map 和 Set。</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-10-%E5%BC%82%E6%AD%A5"><span class="nav-number">1.2.10.</span> <span class="nav-text">3.10 异步</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0%E7%9A%84%E5%B5%8C%E5%A5%97%E4%B8%8D%E5%BE%97%E8%B6%85%E8%BF%873%E5%B1%82%E3%80%82"><span class="nav-number">1.2.10.1.</span> <span class="nav-text">[强制] 回调函数的嵌套不得超过3层。</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E4%BD%BF%E7%94%A8-Promise-%E4%BB%A3%E6%9B%BF-callback%E3%80%82"><span class="nav-number">1.2.10.2.</span> <span class="nav-text">[建议] 使用 Promise 代替 callback。</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%BD%BF%E7%94%A8%E6%A0%87%E5%87%86%E7%9A%84-Promise-API%E3%80%82"><span class="nav-number">1.2.10.3.</span> <span class="nav-text">[强制] 使用标准的 Promise API。</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%B8%8D%E5%85%81%E8%AE%B8%E7%9B%B4%E6%8E%A5%E6%89%A9%E5%B1%95-Promise-%E5%AF%B9%E8%B1%A1%E7%9A%84-prototype%E3%80%82"><span class="nav-number">1.2.10.4.</span> <span class="nav-text">[强制] 不允许直接扩展 Promise 对象的 prototype。</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BC%BA%E5%88%B6-%E4%B8%8D%E5%BE%97%E4%B8%BA%E4%BA%86%E7%BC%96%E5%86%99%E7%9A%84%E6%96%B9%E4%BE%BF%EF%BC%8C%E5%B0%86%E5%8F%AF%E4%BB%A5%E5%B9%B6%E8%A1%8C%E7%9A%84IO%E8%BF%87%E7%A8%8B%E4%B8%B2%E8%A1%8C%E5%8C%96%E3%80%82"><span class="nav-number">1.2.10.5.</span> <span class="nav-text">[强制] 不得为了编写的方便，将可以并行的IO过程串行化。</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%BB%BA%E8%AE%AE-%E4%BD%BF%E7%94%A8-async-await-%E4%BB%A3%E6%9B%BF-generator-co%E3%80%82"><span class="nav-number">1.2.10.6.</span> <span class="nav-text">[建议] 使用 async&#x2F;await 代替 generator + co。</span></a></li></ol></li></ol></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">郭泽</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">54</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">21</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">51</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner page posts-expand">


    
    
    
    <div class="post-block" lang="zh-CN"><header class="post-header">

<h1 class="post-title" itemprop="name headline">
</h1>

<div class="post-meta-container">
</div>

</header>

      
      
      <div class="post-body">
          <h1 id="JavaScript-编码规范-ESNext-补充篇（草案）"><a href="#JavaScript-编码规范-ESNext-补充篇（草案）" class="headerlink" title="JavaScript 编码规范 - ESNext 补充篇（草案）"></a>JavaScript 编码规范 - ESNext 补充篇（草案）</h1><h2 id="2-代码风格"><a href="#2-代码风格" class="headerlink" title="2 代码风格"></a>2 代码风格</h2><h3 id="2-1-文件"><a href="#2-1-文件" class="headerlink" title="2.1 文件"></a>2.1 文件</h3><h5 id="建议-ESNext-语法的-JavaScript-文件使用-js-扩展名。"><a href="#建议-ESNext-语法的-JavaScript-文件使用-js-扩展名。" class="headerlink" title="[建议] ESNext 语法的 JavaScript 文件使用 .js 扩展名。"></a>[建议] ESNext 语法的 JavaScript 文件使用 <code>.js</code> 扩展名。</h5><h5 id="强制-当文件无法使用-js-扩展名时，使用-es-扩展名。"><a href="#强制-当文件无法使用-js-扩展名时，使用-es-扩展名。" class="headerlink" title="[强制] 当文件无法使用 .js 扩展名时，使用 .es 扩展名。"></a>[强制] 当文件无法使用 <code>.js</code> 扩展名时，使用 <code>.es</code> 扩展名。</h5><p>解释：</p>
<p>某些应用开发时，可能同时包含 ES 5和 ESNext 文件，运行环境仅支持 ES5，ESNext 文件需要经过预编译。部分场景下，编译工具的选择可能需要通过扩展名区分，需要重新定义ESNext文件的扩展名。此时，ESNext 文件必须使用 <code>.es</code> 扩展名。</p>
<p>但是，更推荐使用其他条件作为是否需要编译的区分：</p>
<ol>
<li>基于文件内容。</li>
<li>不同类型文件放在不同目录下。</li>
</ol>
<h3 id="2-2-结构"><a href="#2-2-结构" class="headerlink" title="2.2 结构"></a>2.2 结构</h3><h4 id="2-2-1-缩进"><a href="#2-2-1-缩进" class="headerlink" title="2.2.1 缩进"></a>2.2.1 缩进</h4><h5 id="建议-使用多行模板字符串时遵循缩进原则。当空行与空白字符敏感时，不使用多行模板字符串。"><a href="#建议-使用多行模板字符串时遵循缩进原则。当空行与空白字符敏感时，不使用多行模板字符串。" class="headerlink" title="[建议] 使用多行模板字符串时遵循缩进原则。当空行与空白字符敏感时，不使用多行模板字符串。"></a>[建议] 使用多行模板字符串时遵循缩进原则。当空行与空白字符敏感时，不使用多行模板字符串。</h5><p>解释：</p>
<p><code>4</code> 空格为一个缩进，换行后添加一层缩进。将起始和结束的 <code>`</code> 符号单独放一行，有助于生成 HTML 时的标签对齐。</p>
<p>为避免破坏缩进的统一，当空行与空白字符敏感时，建议使用 <code>多个模板字符串</code> 或 <code>普通字符串</code> 进行连接运算，也可使用数组 <code>join</code> 生成字符串。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> html = <span class="string">`</span></span><br><span class="line"><span class="string">        &lt;div&gt;</span></span><br><span class="line"><span class="string">            &lt;p&gt;&lt;/p&gt;</span></span><br><span class="line"><span class="string">            &lt;p&gt;&lt;/p&gt;</span></span><br><span class="line"><span class="string">        &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// Good</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">greeting</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;Hello, \n&#x27;</span></span><br><span class="line">        + <span class="string">`<span class="subst">$&#123;name.firstName&#125;</span> <span class="subst">$&#123;name.lastName&#125;</span>`</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// Bad</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">greeting</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">`Hello,</span></span><br><span class="line"><span class="string"><span class="subst">$&#123;name.firstName&#125;</span> <span class="subst">$&#123;name.lastName&#125;</span>`</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h4 id="2-2-2-空格"><a href="#2-2-2-空格" class="headerlink" title="2.2.2 空格"></a>2.2.2 空格</h4><h5 id="强制-使用-generator-时，-前面不允许有空格，-后面必须有一个空格。"><a href="#强制-使用-generator-时，-前面不允许有空格，-后面必须有一个空格。" class="headerlink" title="[强制] 使用 generator 时，* 前面不允许有空格，* 后面必须有一个空格。"></a>[强制] 使用 <code>generator</code> 时，<code>*</code> 前面不允许有空格，<code>*</code> 后面必须有一个空格。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="function"><span class="keyword">function</span>* <span class="title">caller</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">yield</span> <span class="string">&#x27;a&#x27;</span>;</span><br><span class="line">    <span class="keyword">yield</span>* callee();</span><br><span class="line">    <span class="keyword">yield</span> <span class="string">&#x27;d&#x27;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> * <span class="title">caller</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">yield</span> <span class="string">&#x27;a&#x27;</span>;</span><br><span class="line">    <span class="keyword">yield</span> *callee();</span><br><span class="line">    <span class="keyword">yield</span> <span class="string">&#x27;d&#x27;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h4 id="2-2-3-语句"><a href="#2-2-3-语句" class="headerlink" title="2.2.3 语句"></a>2.2.3 语句</h4><h5 id="强制-类声明结束不允许添加分号。"><a href="#强制-类声明结束不允许添加分号。" class="headerlink" title="[强制] 类声明结束不允许添加分号。"></a>[强制] 类声明结束不允许添加分号。</h5><p>解释：</p>
<p>与函数声明保持一致。</p>
<h5 id="强制-类成员定义中，方法定义后不允许添加分号，成员属性定义后必须添加分号。"><a href="#强制-类成员定义中，方法定义后不允许添加分号，成员属性定义后必须添加分号。" class="headerlink" title="[强制] 类成员定义中，方法定义后不允许添加分号，成员属性定义后必须添加分号。"></a>[强制] 类成员定义中，方法定义后不允许添加分号，成员属性定义后必须添加分号。</h5><p>解释：</p>
<p>成员属性是当前 <strong>Stage 0</strong> 的标准，如果使用的话，则定义后加上分号。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Foo</span> </span>&#123;</span><br><span class="line">    foo = <span class="number">3</span>;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="title">bar</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Foo</span> </span>&#123;</span><br><span class="line">    foo = <span class="number">3</span></span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="title">bar</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="强制-export-语句后，不允许出现表示空语句的分号。"><a href="#强制-export-语句后，不允许出现表示空语句的分号。" class="headerlink" title="[强制] export 语句后，不允许出现表示空语句的分号。"></a>[强制] <code>export</code> 语句后，不允许出现表示空语句的分号。</h5><p>解释：</p>
<p><code>export</code> 关键字不影响后续语句类型。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">bar</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">bar</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>


<h5 id="强制-属性装饰器后，可以不加分号的场景，不允许加分号。"><a href="#强制-属性装饰器后，可以不加分号的场景，不允许加分号。" class="headerlink" title="[强制] 属性装饰器后，可以不加分号的场景，不允许加分号。"></a>[强制] 属性装饰器后，可以不加分号的场景，不允许加分号。</h5><p>解释：</p>
<p>只有一种场景是必须加分号的：当属性 <code>key</code> 是 <code>computed property key</code> 时，其装饰器必须加分号，否则修饰 <code>key</code> 的 <code>[]</code> 会做为之前表达式的 <code>property accessor</code>。</p>
<p>上面描述的场景，装饰器后需要加分号。其余场景下的属性装饰器后不允许加分号。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Foo</span> </span>&#123;</span><br><span class="line">    @log(<span class="string">&#x27;INFO&#x27;</span>)</span><br><span class="line">    <span class="function"><span class="title">bar</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    @log(<span class="string">&#x27;INFO&#x27;</span>);</span><br><span class="line">    [<span class="string">&#x27;bar&#x27;</span> + <span class="number">2</span>]() &#123;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Foo</span> </span>&#123;</span><br><span class="line">    @log(<span class="string">&#x27;INFO&#x27;</span>);</span><br><span class="line">    <span class="function"><span class="title">bar</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    @log(<span class="string">&#x27;INFO&#x27;</span>)</span><br><span class="line">    [<span class="string">&#x27;bar&#x27;</span> + <span class="number">2</span>]() &#123;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h5 id="强制-箭头函数的参数只有一个，并且不包含解构时，参数部分的括号必须省略。"><a href="#强制-箭头函数的参数只有一个，并且不包含解构时，参数部分的括号必须省略。" class="headerlink" title="[强制] 箭头函数的参数只有一个，并且不包含解构时，参数部分的括号必须省略。"></a>[强制] 箭头函数的参数只有一个，并且不包含解构时，参数部分的括号必须省略。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line">list.map(<span class="function"><span class="params">item</span> =&gt;</span> item * <span class="number">2</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> fetchName = <span class="keyword">async</span> id =&gt; &#123;</span><br><span class="line">    <span class="keyword">let</span> user = <span class="keyword">await</span> request(<span class="string">`users/<span class="subst">$&#123;id&#125;</span>`</span>);</span><br><span class="line">    <span class="keyword">return</span> user.fullName;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line">list.map(<span class="function">(<span class="params">item</span>) =&gt;</span> item * <span class="number">2</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> fetchName = <span class="keyword">async</span> (id) =&gt; &#123;</span><br><span class="line">    <span class="keyword">let</span> user = <span class="keyword">await</span> request(<span class="string">`users/<span class="subst">$&#123;id&#125;</span>`</span>);</span><br><span class="line">    <span class="keyword">return</span> user.fullName;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="建议-箭头函数的函数体只有一个单行表达式语句，且作为返回值时，省略-和-return。"><a href="#建议-箭头函数的函数体只有一个单行表达式语句，且作为返回值时，省略-和-return。" class="headerlink" title="[建议] 箭头函数的函数体只有一个单行表达式语句，且作为返回值时，省略 {} 和 return。"></a>[建议] 箭头函数的函数体只有一个单行表达式语句，且作为返回值时，省略 <code>&#123;&#125;</code> 和 <code>return</code>。</h5><p>如果单个表达式过长，可以使用 <code>()</code> 进行包裹。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line">list.map(<span class="function"><span class="params">item</span> =&gt;</span> item * <span class="number">2</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> foo = <span class="function">() =&gt;</span> (</span><br><span class="line">    condition</span><br><span class="line">        ? returnValueA()</span><br><span class="line">        : returnValueB()</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line">list.map(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> item * <span class="number">2</span>;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h5 id="建议-箭头函数的函数体只有一个-Object-Literal，且作为返回值时，使用-包裹。"><a href="#建议-箭头函数的函数体只有一个-Object-Literal，且作为返回值时，使用-包裹。" class="headerlink" title="[建议] 箭头函数的函数体只有一个 Object Literal，且作为返回值时，使用 () 包裹。"></a>[建议] 箭头函数的函数体只有一个 <code>Object Literal</code>，且作为返回值时，使用 <code>()</code> 包裹。</h5><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line">list.map(<span class="function"><span class="params">item</span> =&gt;</span> (&#123;<span class="attr">name</span>: item[<span class="number">0</span>], <span class="attr">email</span>: item[<span class="number">1</span>]&#125;));</span><br></pre></td></tr></table></figure>

<h5 id="强制-解构多个变量时，如果超过行长度限制，每个解构的变量必须单独一行。"><a href="#强制-解构多个变量时，如果超过行长度限制，每个解构的变量必须单独一行。" class="headerlink" title="[强制] 解构多个变量时，如果超过行长度限制，每个解构的变量必须单独一行。"></a>[强制] 解构多个变量时，如果超过行长度限制，每个解构的变量必须单独一行。</h5><p>解释：</p>
<p>太多的变量解构会让一行的代码非常长，极有可能超过单行长度控制，使代码可读性下降。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> &#123;</span><br><span class="line">    name: personName,</span><br><span class="line">    email: personEmail,</span><br><span class="line">    sex: personSex,</span><br><span class="line">    age: personAge</span><br><span class="line">&#125; = person;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> &#123;<span class="attr">name</span>: personName, <span class="attr">email</span>: personEmail,</span><br><span class="line">    sex: personSex, <span class="attr">age</span>: personAge</span><br><span class="line">&#125; = person;</span><br></pre></td></tr></table></figure>






<h2 id="3-语言特性"><a href="#3-语言特性" class="headerlink" title="3 语言特性"></a>3 语言特性</h2><h3 id="3-1-变量"><a href="#3-1-变量" class="headerlink" title="3.1 变量"></a>3.1 变量</h3><h4 id="强制-使用-let-和-const-定义变量，不使用-var。"><a href="#强制-使用-let-和-const-定义变量，不使用-var。" class="headerlink" title="[强制] 使用 let 和 const 定义变量，不使用 var。"></a>[强制] 使用 <code>let</code> 和 <code>const</code> 定义变量，不使用 <code>var</code>。</h4><p>解释：</p>
<p>使用 <code>let</code> 和 <code>const</code> 定义时，变量作用域范围更明确。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h3 id="3-2-解构"><a href="#3-2-解构" class="headerlink" title="3.2 解构"></a>3.2 解构</h3><h4 id="强制-不要使用3层及以上的解构。"><a href="#强制-不要使用3层及以上的解构。" class="headerlink" title="[强制] 不要使用3层及以上的解构。"></a>[强制] 不要使用3层及以上的解构。</h4><p>解释：</p>
<p>过多层次的解构会让代码变得难以阅读。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> &#123;<span class="attr">documentElement</span>: &#123;<span class="attr">firstElementChild</span>: &#123;nextSibling&#125;&#125;&#125; = <span class="built_in">window</span>;</span><br></pre></td></tr></table></figure>

<h4 id="建议-使用解构减少中间变量。"><a href="#建议-使用解构减少中间变量。" class="headerlink" title="[建议] 使用解构减少中间变量。"></a>[建议] 使用解构减少中间变量。</h4><p>解释：</p>
<p>常见场景如变量值交换，可能产生中间变量。这种场景推荐使用解构。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line">[x, y] = [y, x];</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> temp = x;</span><br><span class="line">x = y;</span><br><span class="line">y = temp;</span><br></pre></td></tr></table></figure>

<h4 id="强制-仅定义一个变量时不允许使用解构。"><a href="#强制-仅定义一个变量时不允许使用解构。" class="headerlink" title="[强制] 仅定义一个变量时不允许使用解构。"></a>[强制] 仅定义一个变量时不允许使用解构。</h4><p>xxxxxxxxxx // Hide everything* {    display: none;}less</p>
<p>在这种场景下，使用解构将降低代码可读性。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> len = myString.length;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> &#123;<span class="attr">length</span>: len&#125; = myString;</span><br></pre></td></tr></table></figure>

<h4 id="强制-如果不节省编写时产生的中间变量，解构表达式-号右边不允许是-ObjectLiteral-和-ArrayLiteral。"><a href="#强制-如果不节省编写时产生的中间变量，解构表达式-号右边不允许是-ObjectLiteral-和-ArrayLiteral。" class="headerlink" title="[强制] 如果不节省编写时产生的中间变量，解构表达式 = 号右边不允许是 ObjectLiteral 和 ArrayLiteral。"></a>[强制] 如果不节省编写时产生的中间变量，解构表达式 <code>=</code> 号右边不允许是 <code>ObjectLiteral</code> 和 <code>ArrayLiteral</code>。</h4><p>解释：</p>
<p>在这种场景下，使用解构将降低代码可读性，通常也并无收益。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> &#123;<span class="attr">first</span>: firstName, <span class="attr">last</span>: lastName&#125; = person;</span><br><span class="line"><span class="keyword">let</span> one = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">let</span> two = <span class="number">2</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> [one, two] = [<span class="number">1</span>, <span class="number">2</span>];</span><br></pre></td></tr></table></figure>

<h4 id="强制-使用剩余运算符时，剩余运算符之前的所有元素必需具名。"><a href="#强制-使用剩余运算符时，剩余运算符之前的所有元素必需具名。" class="headerlink" title="[强制] 使用剩余运算符时，剩余运算符之前的所有元素必需具名。"></a>[强制] 使用剩余运算符时，剩余运算符之前的所有元素必需具名。</h4><p>解释：</p>
<p>剩余运算符之前的元素省略名称可能带来较大的程序阅读障碍。如果仅仅为了取数组后几项，请使用 <code>slice</code> 方法。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> [one, two, ...anyOther] = myArray;</span><br><span class="line"><span class="keyword">let</span> other = myArray.slice(<span class="number">3</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> [,,, ...other] = myArray;</span><br></pre></td></tr></table></figure>



<h3 id="3-3-模板字符串"><a href="#3-3-模板字符串" class="headerlink" title="3.3 模板字符串"></a>3.3 模板字符串</h3><h4 id="强制-字符串内变量替换时，不要使用-2-次及以上的函数调用。"><a href="#强制-字符串内变量替换时，不要使用-2-次及以上的函数调用。" class="headerlink" title="[强制] 字符串内变量替换时，不要使用 2 次及以上的函数调用。"></a>[强制] 字符串内变量替换时，不要使用 <code>2</code> 次及以上的函数调用。</h4><p>解释：</p>
<p>在变量替换符内有太多的函数调用等复杂语法会导致可读性下降。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> fullName = getFullName(getFirstName(), getLastName());</span><br><span class="line"><span class="keyword">let</span> s = <span class="string">`Hello <span class="subst">$&#123;fullName&#125;</span>`</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> s = <span class="string">`Hello <span class="subst">$&#123;getFullName(getFirstName(), getLastName())&#125;</span>`</span>;</span><br></pre></td></tr></table></figure>



<h3 id="3-4-函数"><a href="#3-4-函数" class="headerlink" title="3.4 函数"></a>3.4 函数</h3><h4 id="建议-使用变量默认语法代替基于条件判断的默认值声明。"><a href="#建议-使用变量默认语法代替基于条件判断的默认值声明。" class="headerlink" title="[建议] 使用变量默认语法代替基于条件判断的默认值声明。"></a>[建议] 使用变量默认语法代替基于条件判断的默认值声明。</h4><p>解释：</p>
<p>添加默认值有助于引擎的优化，在未来 <code>strong mode</code> 下也会有更好的效果。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">text = <span class="string">&#x27;hello&#x27;</span></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">text</span>) </span>&#123;</span><br><span class="line">    text = text || <span class="string">&#x27;hello&#x27;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h4 id="强制-不要使用-arguments-对象，应使用-args-代替。"><a href="#强制-不要使用-arguments-对象，应使用-args-代替。" class="headerlink" title="[强制] 不要使用 arguments 对象，应使用 ...args 代替。"></a>[强制] 不要使用 <code>arguments</code> 对象，应使用 <code>...args</code> 代替。</h4><p>解释：</p>
<p>在未来 <code>strong mode</code> 下 <code>arguments</code> 将被禁用。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">...args</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(args.join(<span class="string">&#x27;&#x27;</span>));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log([].join.call(<span class="built_in">arguments</span>));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>




<h3 id="3-5-箭头函数"><a href="#3-5-箭头函数" class="headerlink" title="3.5 箭头函数"></a>3.5 箭头函数</h3><h4 id="强制-一个函数被设计为需要-call-和-apply-的时候，不能是箭头函数。"><a href="#强制-一个函数被设计为需要-call-和-apply-的时候，不能是箭头函数。" class="headerlink" title="[强制] 一个函数被设计为需要 call 和 apply 的时候，不能是箭头函数。"></a>[强制] 一个函数被设计为需要 <code>call</code> 和 <code>apply</code> 的时候，不能是箭头函数。</h4><p>解释：</p>
<p>箭头函数会强制绑定当前环境下的 <code>this</code>。</p>
<h3 id="3-6-对象"><a href="#3-6-对象" class="headerlink" title="3.6 对象"></a>3.6 对象</h3><h4 id="建议-定义对象时，如果所有键均指向同名变量，则所有键都使用缩写；如果有一个键无法指向同名变量，则所有键都不使用缩写。"><a href="#建议-定义对象时，如果所有键均指向同名变量，则所有键都使用缩写；如果有一个键无法指向同名变量，则所有键都不使用缩写。" class="headerlink" title="[建议] 定义对象时，如果所有键均指向同名变量，则所有键都使用缩写；如果有一个键无法指向同名变量，则所有键都不使用缩写。"></a>[建议] 定义对象时，如果所有键均指向同名变量，则所有键都使用缩写；如果有一个键无法指向同名变量，则所有键都不使用缩写。</h4><p>解释：</p>
<p>目的在于保持所有键值对声明的一致性。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> foo = &#123;x, y, z&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> foo2 = &#123;</span><br><span class="line">    x: <span class="number">1</span>,</span><br><span class="line">    y: <span class="number">2</span>,</span><br><span class="line">    z: z</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> foo = &#123;</span><br><span class="line">    x: x,</span><br><span class="line">    y: y,</span><br><span class="line">    z: z</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> foo2 = &#123;</span><br><span class="line">    x: <span class="number">1</span>,</span><br><span class="line">    y: <span class="number">2</span>,</span><br><span class="line">    z</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h4 id="强制-定义方法时使用-MethodDefinition-语法，不使用-PropertyName-FunctionExpression-语法。"><a href="#强制-定义方法时使用-MethodDefinition-语法，不使用-PropertyName-FunctionExpression-语法。" class="headerlink" title="[强制] 定义方法时使用 MethodDefinition 语法，不使用 PropertyName: FunctionExpression 语法。"></a>[强制] 定义方法时使用 <code>MethodDefinition</code> 语法，不使用 <code>PropertyName: FunctionExpression</code> 语法。</h4><p>解释：</p>
<p><code>MethodDefinition</code> 语法更清晰简洁。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> foo = &#123;</span><br><span class="line">    <span class="function"><span class="title">bar</span>(<span class="params">x, y</span>)</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> x + y;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> foo = &#123;</span><br><span class="line">    bar: <span class="function"><span class="keyword">function</span> (<span class="params">x, y</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> x + y;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h4 id="建议-使用-Object-keys-或-Object-entries-进行对象遍历。"><a href="#建议-使用-Object-keys-或-Object-entries-进行对象遍历。" class="headerlink" title="[建议] 使用 Object.keys 或 Object.entries 进行对象遍历。"></a>[建议] 使用 <code>Object.keys</code> 或 <code>Object.entries</code> 进行对象遍历。</h4><p>解释：</p>
<p>不建议使用 <code>for .. in</code> 进行对象的遍历，以避免遗漏 <code>hasOwnProperty</code> 产生的错误。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> key <span class="keyword">of</span> <span class="built_in">Object</span>.keys(foo)) &#123;</span><br><span class="line">    <span class="keyword">let</span> value = foo[key];</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> [key, value] <span class="keyword">of</span> <span class="built_in">Object</span>.entries(foo)) &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="建议-定义对象的方法不应使用箭头函数。"><a href="#建议-定义对象的方法不应使用箭头函数。" class="headerlink" title="[建议] 定义对象的方法不应使用箭头函数。"></a>[建议] 定义对象的方法不应使用箭头函数。</h4><p>解释：</p>
<p>箭头函数将 <code>this</code> 绑定到当前环境，在 <code>obj.method()</code> 调用时容易导致不期待的 <code>this</code>。除非明确需要绑定 <code>this</code>，否则不应使用箭头函数。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> foo = &#123;</span><br><span class="line">    <span class="function"><span class="title">bar</span>(<span class="params">x, y</span>)</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> x + y;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> foo = &#123;</span><br><span class="line">    bar: <span class="function">(<span class="params">x, y</span>) =&gt;</span> x + y</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>


<h4 id="建议-尽量使用计算属性键在一个完整的字面量中完整地定义一个对象，避免对象定义后直接增加对象属性。"><a href="#建议-尽量使用计算属性键在一个完整的字面量中完整地定义一个对象，避免对象定义后直接增加对象属性。" class="headerlink" title="[建议] 尽量使用计算属性键在一个完整的字面量中完整地定义一个对象，避免对象定义后直接增加对象属性。"></a>[建议] 尽量使用计算属性键在一个完整的字面量中完整地定义一个对象，避免对象定义后直接增加对象属性。</h4><p>解释：</p>
<p>在一个完整的字面量中声明所有的键值，而不需要将代码分散开来，有助于提升代码可读性。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">const</span> MY_KEY = <span class="string">&#x27;bar&#x27;</span>;</span><br><span class="line"><span class="keyword">let</span> foo = &#123;</span><br><span class="line">    [MY_KEY + <span class="string">&#x27;Hash&#x27;</span>]: <span class="number">123</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">const</span> MY_KEY = <span class="string">&#x27;bar&#x27;</span>;</span><br><span class="line"><span class="keyword">let</span> foo = &#123;&#125;;</span><br><span class="line">foo[MY_KEY + <span class="string">&#x27;Hash&#x27;</span>] = <span class="number">123</span>;</span><br></pre></td></tr></table></figure>





<h3 id="3-7-类"><a href="#3-7-类" class="headerlink" title="3.7 类"></a>3.7 类</h3><h4 id="强制-使用-class-关键字定义一个类。"><a href="#强制-使用-class-关键字定义一个类。" class="headerlink" title="[强制] 使用 class 关键字定义一个类。"></a>[强制] 使用 <code>class</code> 关键字定义一个类。</h4><p>解释：</p>
<p>直接使用 <code>class</code> 定义类更清晰。不要再使用 <code>function</code> 和 <code>prototype</code> 形式的定义。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">TextNode</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">value, engine</span>)</span> &#123;</span><br><span class="line">        <span class="built_in">this</span>.value = value;</span><br><span class="line">        <span class="built_in">this</span>.engine = engine;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="title">clone</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">this</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">TextNode</span>(<span class="params">value, engine</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.value = value;</span><br><span class="line">    <span class="built_in">this</span>.engine = engine;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">TextNode.prototype.clone = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h4 id="强制-使用-super-访问父类成员，而非父类的-prototype。"><a href="#强制-使用-super-访问父类成员，而非父类的-prototype。" class="headerlink" title="[强制] 使用 super 访问父类成员，而非父类的 prototype。"></a>[强制] 使用 <code>super</code> 访问父类成员，而非父类的 <code>prototype</code>。</h4><p>解释：</p>
<p>使用 <code>super</code> 和 <code>super.foo</code> 可以快速访问父类成员，而不必硬编码父类模块而导致修改和维护的不便，同时更节省代码。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">TextNode</span> <span class="keyword">extends</span> <span class="title">Node</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">value, engine</span>)</span> &#123;</span><br><span class="line">        <span class="built_in">super</span>(value);</span><br><span class="line">        <span class="built_in">this</span>.engine = engine;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="title">setNodeValue</span>(<span class="params">value</span>)</span> &#123;</span><br><span class="line">        <span class="built_in">super</span>.setNodeValue(value);</span><br><span class="line">        <span class="built_in">this</span>.textContent = value;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">TextNode</span> <span class="keyword">extends</span> <span class="title">Node</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">value, engine</span>)</span> &#123;</span><br><span class="line">        Node.apply(<span class="built_in">this</span>, <span class="built_in">arguments</span>);</span><br><span class="line">        <span class="built_in">this</span>.engine = engine;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="title">setNodeValue</span>(<span class="params">value</span>)</span> &#123;</span><br><span class="line">        Node.prototype.setNodeValue.call(<span class="built_in">this</span>, value);</span><br><span class="line">        <span class="built_in">this</span>.textContent = value;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h3 id="3-8-模块"><a href="#3-8-模块" class="headerlink" title="3.8 模块"></a>3.8 模块</h3><h4 id="强制-export-与内容定义放在一起。"><a href="#强制-export-与内容定义放在一起。" class="headerlink" title="[强制] export 与内容定义放在一起。"></a>[强制] <code>export</code> 与内容定义放在一起。</h4><p>解释：</p>
<p>何处声明要导出的东西，就在何处使用 <code>export</code> 关键字，不在声明后再统一导出。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> bar = <span class="number">3</span>;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> bar = <span class="number">3</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> &#123;foo&#125;;</span><br><span class="line"><span class="keyword">export</span> &#123;bar&#125;;</span><br></pre></td></tr></table></figure>

<h4 id="建议-相互之间无关联的内容使用命名导出。"><a href="#建议-相互之间无关联的内容使用命名导出。" class="headerlink" title="[建议] 相互之间无关联的内容使用命名导出。"></a>[建议] 相互之间无关联的内容使用命名导出。</h4><p>解释：</p>
<p>举个例子，工具对象中的各个方法，相互之间并没有强关联，通常外部会选择几个使用，则应该使用命名导出。</p>
<p>简而言之，当一个模块只扮演命名空间的作用时，使用命名导出。</p>
<h4 id="强制-所有-import-语句写在模块开始处。"><a href="#强制-所有-import-语句写在模块开始处。" class="headerlink" title="[强制] 所有 import 语句写在模块开始处。"></a>[强制] 所有 <code>import</code> 语句写在模块开始处。</h4><p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">import</span> &#123;bar&#125; <span class="keyword">from</span> <span class="string">&#x27;./bar&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    bar.work();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">import</span> &#123;bar&#125; <span class="keyword">from</span> <span class="string">&#x27;./bar&#x27;</span>;</span><br><span class="line">    bar.work();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>




<h3 id="3-9-集合"><a href="#3-9-集合" class="headerlink" title="3.9 集合"></a>3.9 集合</h3><h4 id="建议-对数组进行连接操作时，使用数组展开语法。"><a href="#建议-对数组进行连接操作时，使用数组展开语法。" class="headerlink" title="[建议] 对数组进行连接操作时，使用数组展开语法。"></a>[建议] 对数组进行连接操作时，使用数组展开语法。</h4><p>解释：</p>
<p>用数组展开代替 <code>concat</code> 方法，数组展开对 <code>Iterable</code> 有更好的兼容性。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> foo = [...foo, newValue];</span><br><span class="line"><span class="keyword">let</span> bar = [...bar, ...newValues];</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> foo = foo.concat(newValue);</span><br><span class="line"><span class="keyword">let</span> bar = bar.concat(newValues);</span><br></pre></td></tr></table></figure>

<h4 id="建议-不要使用数组展开进行数组的复制操作。"><a href="#建议-不要使用数组展开进行数组的复制操作。" class="headerlink" title="[建议] 不要使用数组展开进行数组的复制操作。"></a>[建议] 不要使用数组展开进行数组的复制操作。</h4><p>解释：</p>
<p>使用数组展开语法进行复制，代码可读性较差。推荐使用 <code>Array.from</code> 方法进行复制操作。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> otherArr = <span class="built_in">Array</span>.from(arr);</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> otherArr = [...arr];</span><br></pre></td></tr></table></figure>

<h4 id="建议-尽可能使用-for-of-进行遍历。"><a href="#建议-尽可能使用-for-of-进行遍历。" class="headerlink" title="[建议] 尽可能使用 for .. of 进行遍历。"></a>[建议] 尽可能使用 <code>for .. of</code> 进行遍历。</h4><p>解释：</p>
<p>使用 <code>for .. of</code> 可以更好地接受任何的 <code>Iterable</code> 对象，如 <code>Map#values</code> 生成的迭代器，使得方法的通用性更强。</p>
<p>以下情况除外：</p>
<ol>
<li>遍历确实成为了性能瓶颈，需要使用原生 <code>for</code> 循环提升性能。</li>
<li>需要遍历过程中的索引。</li>
</ol>
<h4 id="强制-当键值有可能不是字符串时，必须使用-Map；当元素有可能不是字符串时，必须使用-Set。"><a href="#强制-当键值有可能不是字符串时，必须使用-Map；当元素有可能不是字符串时，必须使用-Set。" class="headerlink" title="[强制] 当键值有可能不是字符串时，必须使用 Map；当元素有可能不是字符串时，必须使用 Set。"></a>[强制] 当键值有可能不是字符串时，必须使用 <code>Map</code>；当元素有可能不是字符串时，必须使用 <code>Set</code>。</h4><p>解释：</p>
<p>使用普通 Object，对非字符串类型的 <code>key</code>，需要自己实现序列化。并且运行过程中的对象变化难以通知 Object。</p>
<h4 id="建议-需要一个不可重复的集合时，应使用-Set。"><a href="#建议-需要一个不可重复的集合时，应使用-Set。" class="headerlink" title="[建议] 需要一个不可重复的集合时，应使用 Set。"></a>[建议] 需要一个不可重复的集合时，应使用 <code>Set</code>。</h4><p>解释：</p>
<p>不要使用 <code>&#123;foo: true&#125;</code> 这样的普通 <code>Object</code>。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> members = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="string">&#x27;one&#x27;</span>, <span class="string">&#x27;two&#x27;</span>, <span class="string">&#x27;three&#x27;</span>]);</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> members = &#123;</span><br><span class="line">    one: <span class="literal">true</span>,</span><br><span class="line">    two: <span class="literal">true</span>,</span><br><span class="line">    three: <span class="literal">true</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>


<h4 id="建议-当需要遍历功能时，使用-Map-和-Set。"><a href="#建议-当需要遍历功能时，使用-Map-和-Set。" class="headerlink" title="[建议] 当需要遍历功能时，使用 Map 和 Set。"></a>[建议] 当需要遍历功能时，使用 <code>Map</code> 和 <code>Set</code>。</h4><p>解释：</p>
<p><code>Map</code> 和 <code>Set</code> 是可遍历对象，能够方便地使用 <code>for...of</code> 遍历。不要使用使用普通 Object。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> membersAge = <span class="keyword">new</span> <span class="built_in">Map</span>([</span><br><span class="line">    [<span class="string">&#x27;one&#x27;</span>, <span class="number">10</span>],</span><br><span class="line">    [<span class="string">&#x27;two&#x27;</span>, <span class="number">20</span>],</span><br><span class="line">    [<span class="string">&#x27;three&#x27;</span>, <span class="number">30</span>]</span><br><span class="line">]);</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> [key, value] <span class="keyword">of</span> map) &#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> membersAge = &#123;</span><br><span class="line">    one: <span class="number">10</span>,</span><br><span class="line">    two: <span class="number">20</span>,</span><br><span class="line">    three: <span class="number">30</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> key <span class="keyword">in</span> membersAge) &#123;</span><br><span class="line">    <span class="keyword">if</span> (membersAge.hasOwnProperty(key)) &#123;</span><br><span class="line">        <span class="keyword">let</span> value = membersAge[key];</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="建议-程序运行过程中有添加或移除元素的操作时，使用-Map-和-Set。"><a href="#建议-程序运行过程中有添加或移除元素的操作时，使用-Map-和-Set。" class="headerlink" title="[建议] 程序运行过程中有添加或移除元素的操作时，使用 Map 和 Set。"></a>[建议] 程序运行过程中有添加或移除元素的操作时，使用 <code>Map</code> 和 <code>Set</code>。</h4><p>解释：</p>
<p>使用 <code>Map</code> 和 <code>Set</code>，程序的可理解性更好；普通 Object 的语义更倾向于表达固定的结构。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> membersAge = <span class="keyword">new</span> <span class="built_in">Map</span>();</span><br><span class="line">membersAge.set(<span class="string">&#x27;one&#x27;</span>, <span class="number">10</span>);</span><br><span class="line">membersAge.set(<span class="string">&#x27;two&#x27;</span>, <span class="number">20</span>);</span><br><span class="line">membersAge.set(<span class="string">&#x27;three&#x27;</span>, <span class="number">30</span>);</span><br><span class="line">membersAge.delete(<span class="string">&#x27;one&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">let</span> membersAge = &#123;&#125;;</span><br><span class="line">membersAge.one = <span class="number">10</span>;</span><br><span class="line">membersAge.two = <span class="number">20</span>;</span><br><span class="line">membersAge.three = <span class="number">30</span>;</span><br><span class="line"><span class="keyword">delete</span> membersAge[<span class="string">&#x27;one&#x27;</span>];</span><br></pre></td></tr></table></figure>




<h3 id="3-10-异步"><a href="#3-10-异步" class="headerlink" title="3.10 异步"></a>3.10 异步</h3><h4 id="强制-回调函数的嵌套不得超过3层。"><a href="#强制-回调函数的嵌套不得超过3层。" class="headerlink" title="[强制] 回调函数的嵌套不得超过3层。"></a>[强制] 回调函数的嵌套不得超过3层。</h4><p>解释：</p>
<p>深层次的回调函数的嵌套会让代码变得难以阅读。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// bad</span></span><br><span class="line">getUser(userId, <span class="function"><span class="keyword">function</span> (<span class="params">user</span>) </span>&#123;</span><br><span class="line">    validateUser(user, <span class="function"><span class="keyword">function</span> (<span class="params">isValid</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (isValid) &#123;</span><br><span class="line">            saveReport(report, user, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">                notice(<span class="string">&#x27;Saved!&#x27;</span>);</span><br><span class="line">            &#125;);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h4 id="建议-使用-Promise-代替-callback。"><a href="#建议-使用-Promise-代替-callback。" class="headerlink" title="[建议] 使用 Promise 代替 callback。"></a>[建议] 使用 <code>Promise</code> 代替 <code>callback</code>。</h4><p>解释：</p>
<p>相比 <code>callback</code>，使用 <code>Promise</code> 能够使复杂异步过程的代码更清晰。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">let</span> user;</span><br><span class="line">getUser(userId)</span><br><span class="line">    .then(<span class="function"><span class="keyword">function</span> (<span class="params">userObj</span>) </span>&#123;</span><br><span class="line">        user = userObj;</span><br><span class="line">        <span class="keyword">return</span> validateUser(user);</span><br><span class="line">    &#125;)</span><br><span class="line">    .then(<span class="function"><span class="keyword">function</span> (<span class="params">isValid</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (isValid) &#123;</span><br><span class="line">            <span class="keyword">return</span> saveReport(report, user);</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(<span class="string">&#x27;Invalid!&#x27;</span>);</span><br><span class="line">    &#125;)</span><br><span class="line">    .then(</span><br><span class="line">        <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            notice(<span class="string">&#x27;Saved!&#x27;</span>);</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="function"><span class="keyword">function</span> (<span class="params">message</span>) </span>&#123;</span><br><span class="line">            notice(message);</span><br><span class="line">        &#125;</span><br><span class="line">    );</span><br></pre></td></tr></table></figure>


<h4 id="强制-使用标准的-Promise-API。"><a href="#强制-使用标准的-Promise-API。" class="headerlink" title="[强制] 使用标准的 Promise API。"></a>[强制] 使用标准的 <code>Promise</code> API。</h4><p>解释：</p>
<ol>
<li>不允许使用非标准的 <code>Promise</code> API，如 <code>jQuery</code> 的 <code>Deferred</code>、<code>Q.js</code> 的 <code>defer</code> 等。</li>
<li>不允许使用非标准的 <code>Promise</code> 扩展 API，如 <code>bluebird</code> 的 <code>Promise.any</code> 等。</li>
</ol>
<p>使用标准的 <code>Promise</code> API，当运行环境都支持时，可以把 Promise Lib 直接去掉。</p>
<h4 id="强制-不允许直接扩展-Promise-对象的-prototype。"><a href="#强制-不允许直接扩展-Promise-对象的-prototype。" class="headerlink" title="[强制] 不允许直接扩展 Promise 对象的 prototype。"></a>[强制] 不允许直接扩展 <code>Promise</code> 对象的 <code>prototype</code>。</h4><p>解释：</p>
<p>理由和 <strong>不允许修改和扩展任何原生对象和宿主对象的原型</strong> 是一样的。如果想要使用更方便，可以用 utility 函数的形式。</p>
<h4 id="强制-不得为了编写的方便，将可以并行的IO过程串行化。"><a href="#强制-不得为了编写的方便，将可以并行的IO过程串行化。" class="headerlink" title="[强制] 不得为了编写的方便，将可以并行的IO过程串行化。"></a>[强制] 不得为了编写的方便，将可以并行的IO过程串行化。</h4><p>解释：</p>
<p>并行 IO 消耗时间约等于 IO 时间最大的那个过程，串行的话消耗时间将是所有过程的时间之和。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">requestData().then(<span class="function"><span class="keyword">function</span> (<span class="params">data</span>) </span>&#123;</span><br><span class="line">    renderTags(data.tags);</span><br><span class="line">    renderArticles(data.articles);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">requestData</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> [tags, articles] = <span class="keyword">await</span> <span class="built_in">Promise</span>.all([</span><br><span class="line">        requestTags(),</span><br><span class="line">        requestArticles()</span><br><span class="line">    ]);</span><br><span class="line">    <span class="keyword">return</span> &#123;tags, articles&#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">requestData</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> tags = <span class="keyword">await</span> requestTags();</span><br><span class="line">    <span class="keyword">let</span> articles = <span class="keyword">await</span> requestArticles();</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Promise</span>.resolve(&#123;tags, articles&#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="建议-使用-async-await-代替-generator-co。"><a href="#建议-使用-async-await-代替-generator-co。" class="headerlink" title="[建议] 使用 async/await 代替 generator + co。"></a>[建议] 使用 <code>async/await</code> 代替 <code>generator</code> + <code>co</code>。</h4><p>解释：</p>
<p>使用语言自身的能力可以使代码更清晰，也无需引入 <code>co</code> 库。</p>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">addReport(report, userId).then(</span><br><span class="line">    <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        notice(<span class="string">&#x27;Saved!&#x27;</span>);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="function"><span class="keyword">function</span> (<span class="params">message</span>) </span>&#123;</span><br><span class="line">        notice(message);</span><br><span class="line">    &#125;</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">addReport</span>(<span class="params">report, userId</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> user = <span class="keyword">await</span> getUser(userId);</span><br><span class="line">    <span class="keyword">let</span> isValid = <span class="keyword">await</span> validateUser(user);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (isValid) &#123;</span><br><span class="line">        <span class="keyword">let</span> savePromise = saveReport(report, user);</span><br><span class="line">        <span class="keyword">return</span> savePromise();</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(<span class="string">&#x27;Invalid&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">addReport</span>(<span class="params">report, userId</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> co(<span class="function"><span class="keyword">function</span>* (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">let</span> user = <span class="keyword">yield</span> getUser(userId);</span><br><span class="line">        <span class="keyword">let</span> isValid = <span class="keyword">yield</span> validateUser(user);</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span> (isValid) &#123;</span><br><span class="line">            <span class="keyword">let</span> savePromise = saveReport(report, user);</span><br><span class="line">            <span class="keyword">return</span> savePromise();</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(<span class="string">&#x27;Invalid&#x27;</span>);</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>









<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kity@2.0.4/dist/kity.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kityminder-core@1.4.50/dist/kityminder.core.min.js"></script><script defer="true" type="text/javascript" src="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.css">
      </div>
      
      
      
    </div>

    
    


</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">郭泽</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/" rel="noopener" target="_blank">NexT.Gemini</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" integrity="sha256-yt2kYMy0w8AbtF89WXb2P1rfjcP/HTHLT7097U8Y5b8=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script><script src="/js/bookmark.js"></script>

  
<script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-generator-searchdb/1.4.0/search.js" integrity="sha256-vXZMYLEqsROAXkEw93GGIvaB2ab+QW6w3+1ahD9nXXA=" crossorigin="anonymous"></script>
<script src="/js/third-party/search/local-search.js"></script>

  <script class="next-config" data-name="pdf" type="application/json">{"object_url":{"url":"https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.2.8/pdfobject.min.js","integrity":"sha256-tu9j5pBilBQrWSDePOOajCUdz6hWsid/lBNzK4KgEPM="},"url":"/lib/pdf/web/viewer.html"}</script>
  <script src="/js/third-party/tags/pdf.js"></script>

  <script class="next-config" data-name="mermaid" type="application/json">{"enable":true,"theme":{"light":"default","dark":"dark"},"js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.1.3/mermaid.min.js","integrity":"sha256-TIYL00Rhw/8WaoUhYTLX9SKIEFdXxg+yMWSLVUbhiLg="}}</script>
  <script src="/js/third-party/tags/mermaid.js"></script>

  <script src="/js/third-party/fancybox.js"></script>


  





</body>
</html>
